<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息总览 - 巷陌后台管理系统</title>
    <script src="../static/js/echart.min.js"></script>
    <link rel="stylesheet" href="../static/css/all.min.css">
    <style>
        :root {
            --primary-color: #4361ee;
            --primary-light: #4895ef;
            --primary-dark: #3a0ca3;
            --secondary-color: #7209b7;
            --accent-color: #f72585;
            --success-color: #4cc9f0;
            --warning-color: #f8961e;
            --danger-color: #e63946;
            --light-color: #f8f9fa;
            --dark-color: #212529;
            --gray-100: #f8f9fa;
            --gray-200: #e9ecef;
            --gray-300: #dee2e6;
            --gray-400: #ced4da;
            --gray-500: #adb5bd;
            --gray-600: #6c757d;
            --gray-700: #495057;
            --gray-800: #343a40;
            --gray-900: #212529;
            --border-radius: 12px;
            --border-radius-sm: 8px;
            --border-radius-lg: 16px;
            --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
            --shadow-md: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);
            --shadow-lg: 0 10px 25px rgba(0,0,0,0.1), 0 5px 10px rgba(0,0,0,0.05);
            --border-color: #e0e0e0;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
        }

        body {
            background-color: var(--gray-100);
            color: var(--gray-800);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0;
        }

        header {
            text-align: center;
            padding: 20px 0;
            margin-bottom: 30px;
        }

        h1 {
            font-size: 2.2rem;
            margin-bottom: 10px;
            color: var(--primary-color);
            font-weight: 700;
        }

        .description {
            color: var(--gray-600);
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.6;
            font-size: 1.1rem;
        }

        .dashboard-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .card {
            background: white;
            border-radius: var(--border-radius);
            padding: 24px;
            box-shadow: var(--shadow-sm);
            border: 1px solid var(--border-color);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
            border-color: var(--primary-light);
        }

        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .card-title {
            font-size: 1rem;
            font-weight: 600;
            color: var(--gray-700);
        }

        .card-icon {
            width: 48px;
            height: 48px;
            border-radius: var(--border-radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            color: white;
        }

        .bg-primary { background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); }
        .bg-success { background: linear-gradient(135deg, var(--success-color), #3ab7d8); }
        .bg-warning { background: linear-gradient(135deg, var(--warning-color), #e0861b); }
        .bg-danger { background: linear-gradient(135deg, var(--danger-color), #e01e69); }
        .bg-purple { background: linear-gradient(135deg, #9b59b6, #8e44ad); }
        .bg-info { background: linear-gradient(135deg, #00cec9, #00a8b5); }

        .card-value {
            font-size: 2.2rem;
            font-weight: 700;
            margin-bottom: 8px;
            color: var(--gray-900);
        }

        .card-desc {
            font-size: 0.9rem;
            color: var(--gray-600);
            font-weight: 500;
        }

        .chart-container {
            background: white;
            border-radius: var(--border-radius);
            padding: 24px;
            margin-bottom: 24px;
            box-shadow: var(--shadow-sm);
            border: 1px solid var(--border-color);
        }

        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--gray-200);
        }

        .section-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--gray-800);
            margin: 0;
        }

        .chart-actions {
            display: flex;
            gap: 10px;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 8px 16px;
            font-size: 0.9rem;
            font-weight: 500;
            border-radius: var(--border-radius-sm);
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid var(--border-color);
            background: white;
            color: var(--gray-700);
            gap: 6px;
            text-decoration: none;
        }

        .btn:hover {
            background: var(--gray-100);
            border-color: var(--primary-color);
            color: var(--primary-color);
            transform: translateY(-1px);
        }

        .btn-primary {
            background: var(--primary-color);
            border-color: var(--primary-color);
            color: white;
        }

        .btn-primary:hover {
            background: var(--primary-dark);
            border-color: var(--primary-dark);
            color: white;
        }

        .btn-sm {
            padding: 6px 12px;
            font-size: 0.85rem;
        }

        .map-container {
            height: 500px;
            border-radius: var(--border-radius);
            overflow: hidden;
            margin-bottom: 20px;
            background: white;
            border: 1px solid var(--border-color);
        }

        #shopMap {
            height: 100%;
            width: 100%;
        }

        .controls {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin: 20px 0;
            flex-wrap: wrap;
        }

        .legend {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
            flex-wrap: wrap;
            padding: 16px;
            background: var(--gray-100);
            border-radius: var(--border-radius-sm);
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .legend-color {
            width: 16px;
            height: 16px;
            border-radius: 4px;
        }

        .charts-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .chart-wrapper {
            height: 300px;
            position: relative;
            border-radius: var(--border-radius-sm);
            background: white;
            border: 1px solid var(--gray-200);
            transition: all 0.3s ease;
        }

        .chart-wrapper:hover {
            box-shadow: var(--shadow-md);
            transform: translateY(-2px);
        }

        .chart-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--gray-400);
            background: var(--gray-100);
            border-radius: var(--border-radius-sm);
        }

        .status {
            text-align: center;
            margin: 10px 0;
            color: var(--primary-color);
            font-weight: 500;
        }

        /* 自定义弹出窗口样式 */
        .shop-popup {
            position: absolute;
            background: white;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            padding: 16px;
            box-shadow: var(--shadow-lg);
            z-index: 1000;
            min-width: 250px;
            display: none;
        }

        .shop-popup h3 {
            margin: 0 0 12px;
            color: var(--primary-color);
            border-bottom: 1px solid var(--gray-200);
            padding-bottom: 8px;
            font-size: 1.1rem;
        }

        .shop-popup p {
            margin: 8px 0;
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--gray-700);
        }

        .shop-popup .rating {
            color: var(--warning-color);
        }

        .shop-popup .location {
            color: var(--danger-color);
        }

        .shop-popup button {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: var(--border-radius-sm);
            cursor: pointer;
            width: 100%;
            margin-top: 12px;
            transition: background 0.3s;
            font-weight: 500;
        }

        .shop-popup button:hover {
            background: var(--primary-dark);
        }

        .shop-popup .close-btn {
            position: absolute;
            top: 12px;
            right: 12px;
            background: none;
            border: none;
            color: var(--gray-500);
            font-size: 16px;
            cursor: pointer;
            width: auto;
            padding: 4px;
        }

        .shop-popup .close-btn:hover {
            color: var(--gray-700);
        }

        /* 响应式设计 */
        @media (max-width: 1200px) {
            .dashboard-cards {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 992px) {
            .dashboard-cards {
                grid-template-columns: repeat(2, 1fr);
            }

            .charts-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .dashboard-cards {
                grid-template-columns: 1fr;
            }

            h1 {
                font-size: 1.8rem;
            }

            .chart-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }

            .chart-actions {
                width: 100%;
                justify-content: flex-start;
            }

            .controls {
                flex-direction: column;
                align-items: center;
            }

            .btn {
                width: 200px;
            }

            .legend {
                flex-direction: column;
                align-items: center;
                gap: 12px;
            }
        }

        @media (max-width: 576px) {
            body {
                padding: 16px;
            }

            .container {
                padding: 0;
            }

            .card, .chart-container {
                padding: 20px;
            }

            .card-value {
                font-size: 1.8rem;
            }

            .chart-wrapper {
                height: 250px;
            }
        }

        /* 动画效果 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .card, .chart-container {
            animation: fadeIn 0.5s ease forwards;
        }

        /* 加载状态 */
        .loading {
            opacity: 0.7;
            pointer-events: none;
        }

        /* 工具提示样式 */
        .tooltip {
            position: relative;
        }

        .tooltip:hover::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: var(--gray-800);
            color: white;
            padding: 8px 12px;
            border-radius: var(--border-radius-sm);
            font-size: 0.8rem;
            white-space: nowrap;
            z-index: 1000;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 统计卡片区域 -->
    <div class="dashboard-cards">
        <div class="card">
            <div class="card-header">
                <div class="card-title">用户总数</div>
                <div class="card-icon bg-primary">
                    <i class="fas fa-users"></i>
                </div>
            </div>
            <div class="card-value personNumber">5,842</div>
            <div class="card-desc">用户总数</div>
        </div>

        <div class="card">
            <div class="card-header">
                <div class="card-title">店铺总数</div>
                <div class="card-icon bg-success">
                    <i class="fas fa-store"></i>
                </div>
            </div>
            <div class="card-value shopNumber">1,296</div>
            <div class="card-desc">店铺总数</div>
        </div>

        <div class="card">
            <div class="card-header">
                <div class="card-title">打卡记录</div>
                <div class="card-icon bg-warning">
                    <i class="fas fa-check-circle"></i>
                </div>
            </div>
            <div class="card-value ckeckingCount">24,753</div>
            <div class="card-desc">打卡记录总数</div>
        </div>

        <div class="card">
            <div class="card-header">
                <div class="card-title">待审核项</div>
                <div class="card-icon bg-danger">
                    <i class="fas fa-clipboard-list"></i>
                </div>
            </div>
            <div class="card-value aduitCount">42</div>
            <div class="card-desc">需尽快处理</div>
        </div>

        <div class="card">
            <div class="card-header">
                <div class="card-title">店铺标签数量</div>
                <div class="card-icon bg-purple">
                    <i class="fas fa-chart-pie"></i>
                </div>
            </div>
            <div class="card-value tagCount">78.5%</div>
            <div class="card-desc">店铺标签数量</div>
        </div>

        <div class="card">
            <div class="card-header">
                <div class="card-title">探店剧本数量</div>
                <div class="card-icon bg-info">
                    <i class="fas fa-stopwatch"></i>
                </div>
            </div>
            <div class="card-value scriptCount">1.2</div>
            <div class="card-desc">剧本数量</div>
        </div>
    </div>

    <!-- 地图区域 -->
    <div class="status" id="status">正在加载地图数据...</div>
    <div class="chart-container">
        <div class="chart-header">
            <div class="section-title">全国店铺分布</div>
        </div>
        <div class="map-container">
            <div id="shopMap"></div>
        </div>
        <div class="controls">
            <button class="btn" id="resetView">重置视图</button>
            <button class="btn" id="zoomIn">放大</button>
            <button class="btn" id="zoomOut">缩小</button>
            <select class="btn" id="mapFilter">
                <option value="all">所有店铺</option>
                <option value="4.5">评分4.5以上</option>
                <option value="4.0">评分4.0以上</option>
            </select>
        </div>
    </div>

    <!-- 图表区域 -->
    <div class="chart-container">
        <div class="chart-header">
            <div class="section-title">店铺核心数据</div>
            <div class="chart-actions">
                <button class="btn btn-primary btn-sm">
                    <i class="fas fa-download"></i> 导出数据
                </button>
                <button class="btn btn-primary btn-sm">查看全部</button>
            </div>
        </div>
        <div class="charts-grid">
            <div class="chart-wrapper">
                <div id="topStoresChart" class="chart-placeholder">
                    <i class="fas fa-chart-bar" style="font-size: 2rem;"></i>
                </div>
            </div>
            <div class="chart-wrapper">
                <div id="storeTypeChart" class="chart-placeholder">
                    <i class="fas fa-chart-pie" style="font-size: 2rem;"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="chart-container">
        <div class="chart-header">
            <div class="section-title">用户行为分析</div>
            <div class="chart-actions">
                <button class="btn btn-primary btn-sm">
                    <i class="fas fa-download"></i> 导出数据
                </button>
                <button class="btn btn-primary btn-sm">查看全部</button>
            </div>
        </div>
        <div class="charts-grid">
            <div class="chart-wrapper">
                <div id="checkInTrendChart" class="chart-placeholder">
                    <i class="fas fa-chart-line" style="font-size: 2rem;"></i>
                </div>
            </div>
            <div class="chart-wrapper">
                <div id="favoriteVsCheckInChart" class="chart-placeholder">
                    <i class="fas fa-chart-radar" style="font-size: 2rem;"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 自定义弹出窗口 -->
<div class="shop-popup" id="shopPopup">
    <button class="close-btn" id="closePopup"><i class="fas fa-times"></i></button>
    <h3 id="popupTitle">店铺名称</h3>
    <p><i class="fas fa-star rating"></i> 评分: <span id="popupRating">0</span>/5.0</p>
    <p><i class="fas fa-map-marker-alt location"></i> 位置: <span id="popupLocation">未知</span></p>
    <p><i class="fas fa-store"></i> 类型: <span id="popupType">未知</span></p>
    <button id="viewDetails" class="btn-primary">查看详情</button>
</div>

<script src="../static/js/jquery.js"></script>
<script src="../static/js/lanebankInformation.js"></script>
<script>
    function initEchartsChinaMap() {
        // 1. 获取地图容器并初始化ECharts实例
        const chartDom = document.getElementById("shopMap");
        const myChart = echarts.init(chartDom);
        const statusElement = document.getElementById("status");
        const popup = document.getElementById("shopPopup");
        const closePopupBtn = document.getElementById("closePopup");

        // 2. 显示加载状态
        statusElement.textContent = "正在加载店铺数据...";

        // 3. 从数据库获取店铺数据
        $.ajax({
            url: "informationOverview/getAllShops",
            type: "GET",
            data:{
                rating: $("#mapFilter").val() == "all" ? null : parseFloat($("#mapFilter").val())
            },
            async:false,
            success: function(response) {
                if (response.code === 200 && response.data) {
                    const shopsData = response.data;

                    // 处理店铺数据
                    const shopPoints = shopsData.map(shop => {
                        // 处理经纬度数据
                        let longitude = shop.longitude ? parseFloat(shop.longitude) : null;
                        let latitude = shop.latitude ? parseFloat(shop.latitude) : null;

                        // 如果没有经纬度数据，使用默认坐标（北京）
                        if (!longitude || !latitude) {
                            longitude = 116.4042 + (Math.random() - 0.5) * 10;
                            latitude = 39.9153 + (Math.random() - 0.5) * 8;
                        }

                        // 处理评分数据
                        const rating = shop.rating ? parseFloat(shop.rating) : 0;

                        // 根据评分设置颜色和大小
                        let symbolSize, color;
                        if (rating >= 4.5) {
                            symbolSize = 20;
                            color = "#ff6b6b"; // 红色 - 高评分
                        } else if (rating >= 4.0) {
                            symbolSize = 16;
                            color = "#4895ef"; // 蓝色 - 中等评分
                        } else if (rating >= 3.0) {
                            symbolSize = 14;
                            color = "#7209b7"; // 紫色 - 一般评分
                        } else {
                            symbolSize = 12;
                            color = "#adb5bd"; // 灰色 - 低评分或无评分
                        }

                        return {
                            id: shop.id,
                            name: shop.name,
                            value: [longitude, latitude],
                            rating: rating,
                            desc: shop.desc || '暂无描述',
                            avatar_url: shop.avatar_url,
                            open_time: shop.open_time || '09:00:00',
                            close_time: shop.close_time || '18:00:00',
                            rating_count: shop.rating_count || 0,
                            symbolSize: symbolSize,
                            itemStyle: {
                                color: color
                            },
                            label: {
                                show: rating >= 4.0, // 只显示评分较高的店铺名称
                                formatter: '{b}',
                                position: 'top',
                                color: '#fff',
                                backgroundColor: 'rgba(0,0,0,0.7)',
                                padding: [2, 4],
                                borderRadius: 4,
                                fontSize: 10
                            }
                        };
                    });

                    // 4. 加载中国地图数据
                    fetch('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json')
                        .then(response => {
                            if (!response.ok) {
                                throw new Error('地图数据加载失败');
                            }
                            return response.json();
                        })
                        .then(chinaJson => {
                            // 注册地图
                            echarts.registerMap('china', chinaJson);

                            // 更新状态
                            statusElement.textContent = `成功加载 ${shopPoints.length} 家店铺数据`;
                            setTimeout(() => {
                                statusElement.style.display = "none";
                            }, 3000);

                            // 5. 设置ECharts配置项 - 使用与其他页面匹配的样式
                            const option = {
                                backgroundColor: "#f8f9fa", // 浅灰色背景，与其他页面匹配
                                title: {
                                    text: `全国店铺分布 (${shopPoints.length}家)`,
                                    left: "center",
                                    textStyle: {
                                        color: "#212529",
                                        fontSize: 16,
                                        fontWeight: "600"
                                    },
                                    subtext: '点击店铺标记查看详情',
                                    subtextStyle: {
                                        color: "#6c757d",
                                        fontSize: 12
                                    }
                                },
                                tooltip: {
                                    trigger: "item",
                                    backgroundColor: "rgba(255, 255, 255, 0.95)",
                                    borderColor: "#e9ecef",
                                    borderWidth: 1,
                                    textStyle: {
                                        color: "#212529"
                                    },
                                    formatter: function(params) {
                                        if (params.seriesType === "scatter") {
                                            const shop = params.data;
                                            const stars = '★'.repeat(Math.floor(shop.rating)) + '☆'.repeat(5 - Math.floor(shop.rating));

                                            return `
                                            <div style="padding: 12px; min-width: 200px;">
                                                <div style="display: flex; align-items: center; margin-bottom: 8px;">
                                                    ${shop.avatar_url ?
                                                `<img src="${shop.avatar_url}" style="width: 40px; height: 40px; border-radius: 8px; margin-right: 8px; object-fit: cover;">` :
                                                `<div style="width: 40px; height: 40px; border-radius: 8px; margin-right: 8px; background: #4361ee; display: flex; align-items: center; justify-content: center; color: white;">
                                                            <i class="fas fa-store"></i>
                                                        </div>`
                                            }
                                                    <div>
                                                        <h4 style="margin: 0; color: #4361ee; font-size: 14px;">${shop.name}</h4>
                                                        <div style="color: #f8961e; font-size: 12px;">${stars} ${shop.rating}</div>
                                                    </div>
                                                </div>
                                                <p style="margin: 4px 0; color: #495057; font-size: 12px;">${shop.desc}</p>
                                                <p style="margin: 4px 0; color: #6c757d; font-size: 11px;">
                                                    <i class="fas fa-clock"></i> ${shop.open_time} - ${shop.close_time}
                                                </p>
                                                <p style="margin: 4px 0; color: #6c757d; font-size: 11px;">
                                                    <i class="fas fa-star"></i> ${shop.rating_count} 条评价
                                                </p>
                                            </div>
                                        `;
                                        }
                                        return params.name;
                                    }
                                },
                                visualMap: {
                                    show: true,
                                    type: "piecewise",
                                    pieces: [
                                        { min: 4.5, label: '优秀 (4.5+)', color: "#ff6b6b" },
                                        { min: 4.0, max: 4.4, label: '良好 (4.0-4.4)', color: "#4895ef" },
                                        { min: 3.0, max: 3.9, label: '一般 (3.0-3.9)', color: "#7209b7" },
                                        { max: 2.9, label: '待改善 (<3.0)', color: "#adb5bd" }
                                    ],
                                    left: "left",
                                    top: "bottom",
                                    textStyle: {
                                        color: "#495057",
                                        fontSize: 11
                                    },
                                    itemWidth: 12,
                                    itemHeight: 12,
                                    borderColor: "#e9ecef"
                                },
                                geo: {
                                    map: "china",
                                    roam: true,
                                    center: [105.0, 36.0],
                                    zoom: 1.2,
                                    label: {
                                        show: true,
                                        color: "#495057",
                                        fontSize: 10,
                                        fontWeight: "normal"
                                    },
                                    emphasis: {
                                        label: {
                                            color: "#4361ee",
                                            fontSize: 11,
                                            fontWeight: "bold"
                                        },
                                        itemStyle: {
                                            areaColor: "#e3f2fd",
                                            borderColor: "#4361ee",
                                            borderWidth: 1
                                        }
                                    },
                                    itemStyle: {
                                        areaColor: "rgba(67, 97, 238, 0.05)",
                                        borderColor: "rgba(67, 97, 238, 0.3)",
                                        borderWidth: 0.5
                                    }
                                },
                                series: [
                                    // 店铺标记
                                    {
                                        id: "shops",
                                        name: "店铺分布",
                                        type: "scatter",
                                        coordinateSystem: "geo",
                                        zlevel: 4,
                                        symbol: "circle",
                                        data: shopPoints,
                                        emphasis: {
                                            itemStyle: {
                                                shadowBlur: 10,
                                                shadowColor: 'rgba(67, 97, 238, 0.5)',
                                                borderColor: '#4361ee',
                                                borderWidth: 2
                                            },
                                            label: {
                                                show: true,
                                                fontWeight: 'bold'
                                            }
                                        }
                                    }
                                ]
                            };

                            // 6. 渲染地图
                            myChart.setOption(option);

                            // 7. 添加点击事件处理
                            myChart.on('click', function(params) {
                                if (params.seriesType === "scatter") {
                                    const shop = params.data;
                                    showShopPopup(shop, params.event.event);
                                }
                            });

                            // 8. 添加控制功能
                            setupControls(myChart);
                        })

                } else {
                    statusElement.textContent = "加载店铺数据失败";
                    statusElement.style.color = "#e63946";
                }
            },
            error: function() {
                statusElement.textContent = "网络错误，无法加载店铺数据";
                statusElement.style.color = "#e63946";
            }
        });

        // 显示店铺详情弹窗
        function showShopPopup(shopData, event) {
            const popup = document.getElementById("shopPopup");

            // 更新弹窗内容
            document.getElementById("popupTitle").textContent = shopData.name;
            document.getElementById("popupRating").textContent = shopData.rating;
            document.getElementById("popupLocation").textContent = `经度: ${shopData.value[0].toFixed(4)}, 纬度: ${shopData.value[1].toFixed(4)}`;
            document.getElementById("popupType").textContent = shopData.desc || '暂无描述';

            // 先显示弹窗以获取实际尺寸
            popup.style.display = 'block';
            popup.style.visibility = 'hidden'; // 临时隐藏以避免闪烁

            // 获取弹窗的实际尺寸
            const popupRect = popup.getBoundingClientRect();
            const popupWidth = popupRect.width;
            const popupHeight = popupRect.height;

            // 恢复可见性
            popup.style.visibility = 'visible';

            // 获取点击位置（考虑页面滚动）
            const clickX = event.clientX;
            const clickY = event.clientY;

            // 获取视口尺寸和滚动位置
            const windowWidth = window.innerWidth;
            const windowHeight = window.innerHeight;
            const scrollX = window.pageXOffset || document.documentElement.scrollLeft;
            const scrollY = window.pageYOffset || document.documentElement.scrollTop;

            // 计算绝对位置
            let absoluteX = clickX + scrollX;
            let absoluteY = clickY + scrollY;

            // 智能定位算法
            let finalX, finalY;

            // 水平定位策略
            const spaceRight = windowWidth - clickX - 20;
            const spaceLeft = clickX - 20;

            if (spaceRight >= popupWidth || spaceRight >= spaceLeft) {
                // 右侧空间足够或比左侧多，放在右侧
                finalX = absoluteX + 15;
            } else {
                // 左侧空间更多，放在左侧
                finalX = absoluteX - popupWidth - 15;
            }

            // 垂直定位策略
            const spaceBelow = windowHeight - clickY - 20;
            const spaceAbove = clickY - 20;

            if (spaceBelow >= popupHeight || spaceBelow >= spaceAbove) {
                // 下方空间足够或比上方多，放在下方
                finalY = absoluteY + 15;
            } else {
                // 上方空间更多，放在上方
                finalY = absoluteY - popupHeight - 15;
            }

            // 边界检查
            finalX = Math.max(10, Math.min(finalX, scrollX + windowWidth - popupWidth - 10));
            finalY = Math.max(10, Math.min(finalY, scrollY + windowHeight - popupHeight - 10));

            // 应用位置
            popup.style.position = 'fixed';
            popup.style.left = finalX + 'px';
            popup.style.top = finalY + 'px';
            popup.style.zIndex = '10000';

            // 添加动画效果
            popup.style.opacity = '0';
            popup.style.transform = 'translateY(-10px) scale(0.95)';

            requestAnimationFrame(() => {
                popup.style.transition = 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)';
                popup.style.opacity = '1';
                popup.style.transform = 'translateY(0) scale(1)';
            });

            // 点击外部关闭
            const closeOnOutsideClick = (e) => {
                if (!popup.contains(e.target)) {
                    popup.style.display = 'none';
                    document.removeEventListener('click', closeOnOutsideClick);
                }
            };

            // 延迟绑定事件，避免立即触发
            setTimeout(() => {
                document.addEventListener('click', closeOnOutsideClick);
            }, 100);
        }

        // 关闭弹窗
        closePopupBtn.addEventListener('click', function() {
            popup.style.display = 'none';
        });

        // 点击查看详情按钮
        document.getElementById("viewDetails").addEventListener('click', function() {
            const shopName = document.getElementById("popupTitle").textContent;
            // 这里可以跳转到店铺详情页
            alert(`跳转到 ${shopName} 的详细信息页面`);
        });

        // 筛选功能
        document.getElementById('mapFilter').addEventListener('change', function(e) {
            const filterValue = e.target.value;
            // 重新加载数据时会应用筛选
            initEchartsChinaMap();
        });

        // 设置控制功能
        function setupControls(myChart) {
            let rotationInterval = null;

            document.getElementById('resetView').addEventListener('click', function() {
                myChart.setOption({
                    geo: {
                        center: [105.0, 36.0],
                        zoom: 1.2,
                        rotation: 0
                    }
                });
            });

            // document.getElementById('toggleRotation').addEventListener('click', function() {
            //     if (rotationInterval) {
            //         clearInterval(rotationInterval);
            //         rotationInterval = null;
            //         this.textContent = '开启自动旋转';
            //         this.classList.remove('active');
            //     } else {
            //         let rotateAngle = 0;
            //         rotationInterval = setInterval(() => {
            //             rotateAngle += 0.5;
            //             myChart.setOption({
            //                 geo: {
            //                     rotation: [rotateAngle, 0, 0]
            //                 }
            //             });
            //         }, 100);
            //         this.textContent = '停止自动旋转';
            //         this.classList.add('active');
            //     }
            // });

            document.getElementById('zoomIn').addEventListener('click', function() {
                const currentOption = myChart.getOption();
                const currentZoom = currentOption.geo ? currentOption.geo[0].zoom || 1.2 : 1.2;
                myChart.setOption({
                    geo: {
                        zoom: Math.min(currentZoom * 1.2, 5) // 限制最大缩放级别
                    }
                });
            });

            document.getElementById('zoomOut').addEventListener('click', function() {
                const currentOption = myChart.getOption();
                const currentZoom = currentOption.geo ? currentOption.geo[0].zoom || 1.2 : 1.2;
                myChart.setOption({
                    geo: {
                        zoom: Math.max(currentZoom * 0.8, 0.5) // 限制最小缩放级别
                    }
                });
            });

            // 窗口调整大小时重绘图表
            window.addEventListener("resize", function() {
                myChart.resize();
            });
        }
    }


    // 页面加载完成后初始化地图
    document.addEventListener('DOMContentLoaded', initEchartsChinaMap);
    $("#mapFilter").on("change", function () {
        initEchartsChinaMap();
    })
    let countList =[]
    let nameList = []
    // 页面加载完成后初始化图表
    document.addEventListener('DOMContentLoaded', function() {
        $.ajax({
            url:"informationOverview/TOP5Chart",
            type:"get",
            async:false,
            success:function (res){
                countList = res.data.countList
                nameList = res.data.nameList
            }
        })
        // 1. 热门店铺TOP5 - 柱状图
        const topStoresChart = echarts.init(document.getElementById('topStoresChart'));
        const topStoresOption = {
            title: {
                text: '热门店铺TOP5',
                left: 'center',
                textStyle: {
                    fontSize: 14,
                    color: '#4E5969'
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: nameList,
                axisLabel: {
                    rotate: 30,
                    interval: 0
                }
            },
            yAxis: {
                type: 'value',
                name: '打卡数'
            },
            series: [
                {
                    name: '打卡数',
                    type: 'bar',
                    data: countList,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#165DFF' },
                            { offset: 1, color: '#E8F3FF' }
                        ])
                    },
                    emphasis: {
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#0E42D2' },
                                { offset: 1, color: '#165DFF' }
                            ])
                        }
                    }
                }
            ]
        };
        topStoresChart.setOption(topStoresOption);
        let dataList = []
        $.ajax({
            url:"informationOverview/ShopTag",
            type:"get",
            async:false,
            success:function (res){
                dataList = res.data
            }
        })
        // 2. 店铺类型分布 - 饼图
        const storeTypeChart = echarts.init(document.getElementById('storeTypeChart'));
        const storeTypeOption = {
            title: {
                text: '店铺类型分布',
                left: 'center',
                textStyle: {
                    fontSize: 14,
                    color: '#fff'
                },
                backgroundColor: 'rgba(50, 50, 50, 0.7)', // 添加背景色
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 10,
                textStyle: {
                    fontSize: 12
                }
            },
            series: [
                {
                    name: '商铺类型分类',  // 这里修改名称
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 14,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: dataList,
                    color: ['#165DFF', '#00B42A', '#FF7D00', '#F53F3F', '#86909C']
                }
            ]
        };
        storeTypeChart.setOption(storeTypeOption);
        let checkingList = []
        let scriptList = []
        let dateList = []
        $.ajax({
            url:"informationOverview/CheckingScriptCount",
            type:"get",
            async:false,
            success:function (res){
                var data = res.data;
                for(var i = 0;i<data.length;i++){
                    checkingList.push(data[i].checkingCount)
                    scriptList.push(data[i].scriptCount)
                    dateList.push(data[i].date)
                }
            }
        })
        // 3. 打卡趋势 - 折线图
        const checkInTrendChart = echarts.init(document.getElementById('checkInTrendChart'));
        const checkInTrendOption = {
            title: {
                text: '近7天打卡趋势',
                left: 'center',
                textStyle: {
                    fontSize: 14,
                    color: '#4E5969'
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['打卡数', '收藏数'],
                bottom: 0,
                textStyle: {
                    fontSize: 12
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '15%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: dateList
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '打卡数',
                    type: 'line',
                    stack: 'Total',
                    data: checkingList,
                    smooth: true,
                    lineStyle: {
                        width: 3,
                        color: '#165DFF'
                    },
                    symbol: 'circle',
                    symbolSize: 6,
                    itemStyle: {
                        color: '#165DFF'
                    }
                },
                {
                    name: '探店剧本数量',
                    type: 'line',
                    stack: 'Total',
                    data: scriptList,
                    smooth: true,
                    lineStyle: {
                        width: 3,
                        color: '#00B42A'
                    },
                    symbol: 'circle',
                    symbolSize: 6,
                    itemStyle: {
                        color: '#00B42A'
                    }
                }
            ]
        };
        checkInTrendChart.setOption(checkInTrendOption);
        let name1List = []
        let count1List = []
        $.ajax({
            url:"informationOverview/UserTOP5Count",
            type:"get",
            async:false,
            success:function (res){
                var data = res.data;
                for(var i = 0;i<data.length;i++){
                    name1List.push(data[i].name)
                    count1List.push(data[i].count)
                }
            }
        })
        // 4. 收藏与打卡对比 - 雷达图
        const favoriteVsCheckInChart = echarts.init(document.getElementById('favoriteVsCheckInChart'));
        const favoriteVsCheckInOption =   {
            title: {
                text: '活跃用户TOP5',
                left: 'center',
                textStyle: {
                    fontSize: 14,
                    color: '#4E5969'
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: name1List,
                axisLabel: {
                    rotate: 30,
                    interval: 0
                }
            },
            yAxis: {
                type: 'value',
                name: '用户打卡数'
            },
            series: [
                {
                    name: '用户打卡数',
                    type: 'bar',
                    data: count1List,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#165DFF' },
                            { offset: 1, color: '#E8F3FF' }
                        ])
                    },
                    emphasis: {
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#0E42D2' },
                                { offset: 1, color: '#165DFF' }
                            ])
                        }
                    }
                }
            ]
        };
        favoriteVsCheckInChart.setOption(favoriteVsCheckInOption);

        // 响应窗口大小变化，重绘图表
        window.addEventListener('resize', function() {
            topStoresChart.resize();
            storeTypeChart.resize();
            checkInTrendChart.resize();
            favoriteVsCheckInChart.resize();
        });
    });
</script>
</body>
</html>
